<template>
	<div class="kanban">
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money base-flex">
						<div
							class="money-li"
							v-for="(item, index) in panel.orderMoney"
							:key="index"
						>
							<div class="title">
								{{ item.title }}
								<div class="money-li__icon" v-if="item.tips">
									<el-tooltip effect="dark" :content="item.tips" placement="top">
										<i class="el-icon-info"></i>
									</el-tooltip>
								</div>
							</div>
							<div class="num">{{ item.num || 0 }}</div>
						</div>
					</div>
				</div>
			</template>
			<template #slot-top-mask>
				<div class="mask"></div>
			</template>
			<template #slot-datepicker>
				<div class="Filter base-flex">
					<div
						v-for="(item, index) in timeList"
						:key="index"
						class="top-btn"
						:class="panel.TimeIndex == item.label ? 'active' : ''"
						@click="changeTime(panel, item.label)"
					>
						{{ item.value }}
					</div>
				</div>
				<div style="margin: 0 20px">
					<date-picker
						@change="
							val =>
								crud.refresh({
									startTime: val[0],
									endTime: val[1],
									page: 1
								})
						"
						@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>

				<el-button
					@click="orderExport(panel.params)"
					type="primary"
					style="margin-left:10px"
					size="mini"
					v-permission="$service.crm.zfbStatisticsData.permission.orderExport"
				>
					<i class="el-icon-download"></i>导出报表
				</el-button>
			</template>
			<template #slot-screen-project>
				<div>
					<el-select
						size="mini"
						filterable
						multiple
						placeholder="选择项目"
						v-model="panel.project"
						style="margin-right: 10px;width:400px;"
						@change="val => crud.refresh({ id: val.join(), page: 1 })"
					>
						<el-option label="全部" value=""></el-option>
						<el-option
							v-for="(item, index) in panel.projectList"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';
import { download } from '@/utils/index';
export default {
	data() {
		return {
			panel: {
				orderMoney: [
					{
						title: 'PV',
						tips: '浏览量',
						num: '',
						code: 'PV'
					},
					{
						title: 'UV',
						tips: '访客数',
						num: '',
						code: 'UV'
					},
					{
						title: '新增访客',
						tips: '新增访客数',
						num: '',
						code: 'newUserNum'
					},
					{
						title: '总访客',
						tips: '总访客数',
						num: '',
						code: 'userTotal'
					},
					{
						title: '销售额',
						tips: '该段时间内创建的所有有效订单（付款订单+结算订单）的付款金额之和',
						num: '',
						code: 'orderAmount'
					},
					{
						title: '有效佣金',
						tips: '统计时间内，（付款订单+结算订单）的有效佣金之和',
						num: '',
						code: 'validCommissionTotal'
					},
					{
						title: '预估佣金',
						tips: '统计时间内付款订单有效佣金之和',
						num: '',
						code: 'payCommissionTotal'
					},
					{
						title: '有效单数',
						tips: '统计时间内有效订单（付款订单+结算订单）之和',
						num: '',
						code: 'validOrderNum'
					},
					{
						title: '京礼金消耗',
						tips: '用户已使用的京礼金金额之和',
						num: '',
						code: 'tljMoney'
					},
					{
						title: '失效订单',
						tips: '',
						num: '',
						code: 'invalidOrderNum'
					},
					{
						title: '净利润',
						tips: '（有效佣金-京礼金）-（有效佣金-京礼金）*（对应渠道的分成比例）',
						num: '',
						code: 'profit'
					},
					{
						title: '转化(%)',
						tips: '有效订单/UV',
						num: '',
						code: 'orderTransform'
					},
					{
						title: '利润单产',
						tips: '净利润/UV',
						num: '',
						code: 'singleYield'
					},
					{
						title: '平均客单',
						tips: '销售额/有效订单',
						num: '',
						code: 'customerOrder'
					},
					{
						title: '佣金单产',
						tips: '有效佣金/UV',
						num: '',
						code: 'commissionSingleYield'
					}
				],
				TimeIndex: 1,
				params: null,
				project: [],
				projectList: []
			},
			timeList: [
				{
					label: 1,
					value: '今日'
				},
				{
					label: 2,
					value: '昨日'
				},
				{
					label: 3,
					value: '最近7天'
				},
				{
					label: 4,
					value: '最近30天'
				},
				{
					label: 5,
					value: '本月'
				},
				{
					label: 6,
					value: '全部'
				}
			]
		};
	},
	components: {
		DatePicker
	},
	mounted() {},

	methods: {
		changeTime(val, i) {
			this.$set(val, 'TimeIndex', i);
			var start = '';
			var end = '';
			switch (i) {
				case 1:
					start = moment().format('YYYY-MM-DD');
					end = moment().format('YYYY-MM-DD');
					break;
				case 2:
					start = moment()
						.subtract(1, 'days')
						.format('YYYY-MM-DD');
					end = moment()
						.subtract(1, 'days')
						.format('YYYY-MM-DD');
					break;
				case 3:
					start = moment()
						.subtract(7, 'days')
						.format('YYYY-MM-DD');
					end = moment().format('YYYY-MM-DD');
					break;
				case 4:
					start = moment()
						.subtract(30, 'days')
						.format('YYYY-MM-DD');
					end = moment().format('YYYY-MM-DD');
					break;
				case 5:
					start = moment()
						.startOf('month')
						.format('YYYY-MM-DD');
					end = moment()
						.endOf('month')
						.format('YYYY-MM-DD');
					break;
				case 6:
					start = '';
					end = '';
					break;
			}

			this.crud.refresh({
				startTime: start,
				endTime: end
			});
		},
		orderExport(obj) {
			this.$service.channel.project.reportExport(obj).then(res => {
				download({
					data: res,
					fileName: `京礼金百亿补贴-${moment().format('YYYY-MM-DD HH:mm:ss')}`
				});
			});
		},
		async onLoad({ ctx, app }) {
			this.crud = app;
			let list = await this.$service.channel.project.list({ type: 2 });
			let list2 = [];
			list.map(e => {
				list2.push({
					value: e.id,
					label: e.name
				});
			});
			this.panel.projectList = list2;
			ctx.service(this.$service.channel.project)
				.set('dict', {
					api: {
						page: 'report'
					}
				})
				.set('search', {
					key: {
						placeholder: '请输入渠道名称'
					}
				})
				.set('table', {
					columns: [
						{
							label: '渠道',
							prop: 'channelName',
							align: 'center'
						},
						{
							label: '渠道id',
							prop: 'channelId',
							align: 'center'
						},
						{
							label: 'PV',
							prop: 'PV',
							align: 'center'
						},
						{
							label: 'UV',
							prop: 'UV',
							align: 'center'
						},
						{
							label: '新增访客',
							prop: 'newUserNum',
							align: 'center'
						},
						{
							label: '总访客',
							prop: 'userTotal',
							align: 'center'
						},
						{
							label: '有效佣金',
							prop: 'validCommissionTotal',
							align: 'center'
						},
						{
							label: '销售额',
							prop: 'orderAmount',
							align: 'center'
						},
						{
							label: '预估佣金',
							prop: 'payCommissionTotal',
							align: 'center'
						},
						{
							label: '有效单数',
							prop: 'validOrderNum',
							align: 'center'
						},
						{
							label: '京礼金消耗',
							prop: 'tljMoney',
							align: 'center'
						},
						{
							label: '净利润',
							prop: 'profit',
							align: 'center'
						},
						{
							label: '转化',
							prop: 'orderTransform',
							align: 'center',
							formatter: row => {
								return Number(row.orderTransform * 100).toFixed(2) + '%';
							}
						},
						{
							label: '利润单产',
							prop: 'singleYield',
							align: 'center',
							formatter: row => {
								return Number(row.singleYield || 0).toFixed(4);
							}
						},
						{
							label: '平均客单',
							prop: 'customerOrder',
							align: 'center',
							formatter: row => {
								return Number(row.customerOrder || 0).toFixed(4);
							}
						},
						{
							label: '佣金单产',
							prop: 'commissionSingleYield',
							align: 'center',
							formatter: row => {
								return Number(row.commissionSingleYield || 0).toFixed(4);
							}
						}
					],

					op: {
						visible: false
					}
				})

				.set('layout', [
					['slot-top-stats'],
					['slot-top-mask'],
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['slot-screen-project'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.panel.params = params;
					let { subData } = await next(params);
					for (let i in subData) {
						this.panel.orderMoney.forEach(m => {
							if (m.code == i) {
								m.num = subData[i] || 0;
							}
						});
					}
				})
				.done();

			app.refresh({
				type: 2,
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.number {
	width: 100%;
	background: #ffffff;
	.money {
		display: flex;
		flex-wrap: wrap;
		.money-li {
			width: 100px;
			text-align: center;
			margin: 10px;
			.title {
				color: $text-grey;
				font-size: $font12;
				position: relative;
				display: inline-block;
			}
			.money-li__icon {
				position: absolute;
				top: 0;
				right: -20px;
				font-size: 14px;
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
.mask {
	width: 100%;
	height: 10px;
	background: $bg-grey;
}
.top-btn {
	display: inline-block;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 14px;
	color: #595959;
	background: #ffffff;
	padding: 3px 25px;
	margin-left: 8px;
	cursor: pointer;
	&.active {
		border-color: #b3d8ff;
		color: #409eff;
	}
}
</style>
